<template>
  <div class="content">
    <div class="new-item">
      <div class="new-item-header">
        <img src="../assets/images/touxiang (1).png" alt="">
        <div class="name-width">
          <p class="nickname">Legion H</p>
          <p class="time">十分钟前</p>
        </div>
        <img class="zhubo-icon" src="../assets/images/zhubo.png" alt="">
        <img class="guanzhu-icon" src="../assets/images/guanzhu.png" alt="">
        <img class="genduo-icon" @click="download()" src="../assets/images/genduo.png" alt="">
      </div>
      <div class="new-item-content">所有人快来和我一起尬聊啊!我在哈哈哈哈哈跨年派对等你哦~</div>
      <div class="new-item-pic">
        <p class="pic-item">
          <img src="../assets/images/pic01.png" alt="">
        </p>
        <p class="pic-item">
          <img src="../assets/images/pic02.png" alt="">
        </p>
        <p class="pic-item">
          <img src="../assets/images/pic03.png" alt="">
        </p>
      </div>
      <div class="new-item-vote">
        <div class="vote-item">
          <p class="candidate">Legion H</p>
          <img class="vote-icon" src="../assets/images/toupiao.png" alt="">
        </div>
        <div class="vote-item">
          <p class="candidate">Legion H</p>
          <img class="vote-icon" src="../assets/images/toupiao.png" alt="">
        </div>
        <div class="vote-item">
          <p class="candidate">Legion H</p>
          <img class="vote-icon" src="../assets/images/toupiao.png" alt="">
        </div>
        <div class="vote-item">
          <p class="candidate">Legion H</p>
          <img class="vote-icon" src="../assets/images/toupiao.png" alt="">
        </div>
      </div>
      <div class="new-item-game">
        <img class="game-icon" src="../assets/images/youxiciji.png" alt="">
        <div class="game-name-box">
          <p class="game-name">刺激战场</p>
          <p class="game-nick">游戏昵称：黑胡子</p>
        </div>
        <img class="dianji-icon" src="../assets/images/dianjichakan.png" alt="">
      </div>
      <div class="new-item-comment">
        <div class="comment-header">
          <img class="game-name-icon" src="../assets/images/gamenameicon.png" alt="">
          <div class="pinglun-icon-box">
            <img class="fengxiang-icon" src="../assets/images/fengxiangicon.png" alt="">
            <img class="pinglun-icon" src="../assets/images/pinglunicon.png" alt="">
            <span>143</span>
          </div>
        </div>
        <div class="comment-content">
          <img class="shenping-icon" src="../assets/images/shenping.png" alt="">
          <div class="comment-item">
            <span class="comment-name">Eric:</span>
            <i class="comment-word">好漂亮啊！</i>
          </div>
          <div class="comment-item">
            <span class="comment-name">Eric:</span>
            <i class="comment-word">好漂亮啊！</i>
          </div>
          <div class="comment-item">
            <span class="comment-name">Eric:</span>
            <i class="comment-word">好漂亮啊！</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Vue from 'vue'
import { MessageBox } from 'mint-ui'
export default {
  methods: {
    download () {
      MessageBox.prompt('内容质量差', '选择屏蔽理由，精准屏蔽', { inputPlaceholder: '其他屏蔽理由' }).then(({ value, action }) => {
        console.log(value)
      })
      // MessageBox({
      //   title: '确定下载附件？',
      //   message: '附件名称?',
      //   showCancelButton: true
      // }).then(action => {
      //   if (action === 'confirm') {
      //     console.log(1)
      //   }
      //   if (action === 'cancel') {
      //     console.log(2)
      //   }
      // }).catch(err => {
      //   console.log(err)
      // })
    }
  }
}
</script>

<style scoped lang="scss">
@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
  nav{
    .mint-tab-container {
      height: auto;
      width:10rem;
      .mint-tab-container-wrap{
        height: auto;
        width:10rem;
      }
    }
  }
  .new-item-header{
    display: flex;
    flex-direction:row;
    margin-left: 0.3867rem;
    .name-width{
      // width: 1.5867rem;
      height: 1.0667rem;
      margin-left: 0.2667rem;
    }
    .nickname{
      height:0.3867rem;
      @include font-dpr(15px);
      font-family:SF Pro Display;
      font-weight:bold;
      color:rgba(51,51,51,1);
    }
    .time{
      width:1.08rem;
      height:0.2533rem;
      @include font-dpr(10px);
      font-family:PingFang SC;
      font-weight:bold;
      color:rgba(51,51,51,1);
      line-height:0.8533rem;
      opacity:0.5;
    }
    .zhubo-icon{
      display: block;
      width: 1.3067rem;
      height: 0.4rem;
      margin-left: 0.2933rem;
      margin-top: 0.1333rem;
    }
    .guanzhu-icon{
      width: 1.4667rem;
      height: 0.6667rem;
      display: block;
      margin-left: 2.3867rem;
    }
    .genduo-icon{
      width: 0.1067rem;
      height: 0.4533rem;
      display: block;
      margin-left: 0.44rem;
      margin-top: 0.1333rem;
    }
  }
  .new-item-content{
    margin-top: 0.2133rem;
    margin-left: 0.6133rem;
    margin-right: 0.8267rem;
    @include font-dpr(14px);
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:0.48rem;
  }
  .new-item-pic{
    overflow: hidden;
    margin-left: 0.52rem;
    margin-right: 0.56rem;
    margin-top: 0.0533rem;
    .pic-item{
      width: 2.9733rem;
      height: 3.1733rem;
      float: left;
    }
  }
  .new-item-vote{
    width: 9.2rem;
    margin: 0 auto;
    .vote-item{
      width: 9.2rem;
      display: flex;
      background:rgba(247,247,247,1);
      border-radius:0.1333rem;
      margin: 0.06rem auto;
      .candidate{
        width: 7.7333rem;
        height: 0.6667rem;
        text-indent: 0.5333rem;
         @include font-dpr(12px);
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height: 0.6667rem;
      }
      .vote-icon{
        width: 1.4667rem;
        height: 0.6667rem;
      }
    }
  }
  .new-item-game{
    width: 9.2rem;
    height: 1.6267rem;
    background:rgba(247,247,247,1);
    border-radius:0.1333rem;
    margin: 0.1667rem auto;
    display: flex;
    position: relative;
    .game-icon{
      width: 1.2rem;
      height: 1.2rem;
      display: block;
      margin-top: 0.2267rem;
      margin-bottom: 0.2rem;
      margin-left: 0.2667rem;
    }
    .game-name-box{
      margin-left: 0.2667rem;
      .game-name{
        @include font-dpr(14px);
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:0.72rem;
      }
      .game-nick{
        @include font-dpr(11px);
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        opacity:0.5;
      }
    }
    .dianji-icon{
      width: 1.6rem;
      height: 0.6667rem;
      margin-top: 0.5467rem;
      position: absolute;
      right: 0.2667rem;
    }
  }
  .new-item-comment{
    width: 9.2rem;
    margin: 0 auto;
    .comment-header{
      width: 9.2rem;
      height: 1rem;
      display: flex;
      justify-content: space-between;
      .game-name-icon{
        width: 1.8133rem;
        height: 0.5333rem;
      }
      .pinglun-icon-box{
        margin-right: 0.28rem;
        .pinglun-icon{
          margin-right: 0.0933rem;
        }
        .fengxiang-icon{
          margin-right: 0.2533rem;
        }
      }
    }
    .comment-content{
      background:rgba(247,247,247,1);
      padding-bottom: 0.2667rem;
      .shenping-icon{
        width: 0.3333rem;
        height: 0.3333rem;
      }
      .comment-item{
        width: 9.2rem;
        height: 0.4933rem;
        .comment-name{
          @include font-dpr(13px);
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(103,93,241,1);
          line-height: 0.4933rem;
          margin-left: 0.32rem;
        }
        .comment-word{
          @include font-dpr(13px);
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(51,51,51,1);
          line-height: 0.4933rem;
          margin-left: 0.12rem;
        }
      }
    }
  }
</style>
